<template>
    <div>
        <loading v-if="loadingShow" loadingStyle="height: 200px;"></loading>
        <section class="cashBox" v-else>
            <header class="cashTitle clearfix">
                <span class="cashNumber">提现账号</span>
                <el-button type="warning" class="verificationTel" @click="telMaskShow" v-if="!userInfo.data.realname">验证手机，绑定提现账号</el-button>
                <!-- <el-button type="warning" class="cashRecordBtn" v-if="userInfo.data.realname">提现记录</el-button> -->
            </header>
            <ul class="cashNumberMsg clearfix" v-if="userInfo.data.realname">
                <li class="cashNumberMsgList">
                    <p>账号</p>
                    <p>{{userInfo.data.tixianaccount}}</p>
                    <button class="numberBtn" @click="telMaskShow">修改>></button>
                </li>
                 <li class="cashNumberMsgList">
                    <p>账号余额</p>
                    <p>{{userInfo.data.money}}</p>
                </li>
                 <li class="cashNumberMsgList">
                    <p>已提现</p>
                    <p>{{userInfo.data.tixianmoney}}</p>
                </li>
                 <li class="cashNumberMsgList">
                    <p>累计收益</p>
                    <p>{{userInfo.data.earnings}}</p>
                </li>
            </ul>
            <div class="benefitRecord clearfix">
                    <template>
                        <el-tabs :tab-position="tabPosition">
                            <el-tab-pane label="收益记录" :lazy="true">
                                <week></week>
                            </el-tab-pane>
                            <el-tab-pane label="提现记录" :lazy="true">
                                <month></month>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
            </div>
        </section>
        <div class="telMask" v-if="telMask">
            <ul class="telMaskBox">
                <li class="telMaskList" v-if="telMaskList=='1'">
                    <header class="telMasListTitle">
                        验证手机号
                    </header>
                    <form>
                        <div class="telInput">
                            <div class="telMsg">
                                <form ref="cashMobileFrom">
                                    <input v-model="cashMobile"  v-validate data-vv-rules="required|mobile" data-vv-as="手机号" id="cashMobile" type="mobile" class="" name="mobile" required placeholder="请输入手机号码" maxlength="11">
                                    <span class="help-block" id="forgetVerSpan" v-show="errorBags.has('mobile')">{{errorBags.first('mobile')}}</span>
                                </form>
                            </div>
                            <div class="numMsg">
                                <input type="text" placeholder="请输入验证码" v-model="cashNum">
                                <button type="button" @click="getCode" :disabled="disabledOnoff">{{getNumber}}</button>
                            </div>
                        </div>
                        <p class="TelTips" v-show="false">
                            <i></i>验证码输入错误
                        </p>
                        <div class="telBtn">
                            <button @click="nextZfb">下一步</button>
                        </div>
                     </form>
                    <span class="el-icon-close telClose" @click="telMaskHide"></span>
                </li>
                <li class="telMaskList" v-if="telMaskList=='2'">
                    <header class="telMasListTitle">
                        设置提现账号
                    </header>
                    <div class="telInput zfbInput">
                        <div class="telMsg">
                            <input type="text" placeholder="支付宝真实姓名" v-model="alipayName">
                        </div>
                        <div class="numMsg">
                            <input type="text" placeholder="支付宝账号" v-model="alipay_account">
                        </div>
                    </div>
                    <p class="TelTips">
                        <!-- <i></i>两次输入不一致<span>提示： 请仔细核对提现账号</span> -->
                    </p>
                    <div class="telBtn">
                        <button @click="showSuccess">完成</button>
                    </div>
                    <span class="el-icon-close telClose" @click="telMaskHide"></span>
                </li>
                <li class="telMaskList" v-if="telMaskList=='3'">
                    <header class="telMasListTitle">
                        设置提现账号
                    </header>
                    <p class="telSuccess">
                        <img src="../../../img/applySuccess.jpg" alt="">
                    </p>
                    <p class="telSuccessText">
                       修改成功
                    </p>
                    <div class="cashBtn applyBtn">
                        <button @click="telMaskHide">关闭</button>
                    </div>
                    <span class="el-icon-close telClose" @click="telMaskHide"></span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import loading from '../../loading'
export default {
    name : "cash",
    data () {
        return {
            msg : "提现",
            tabPosition: 'top',
            telMask : false,//验证手机号码绑定支付宝弹窗
            telMaskList : "1",//验证手机号显示
            cashAnnal : false,//提现记录显示否
            cashMobile : "",//体现手机号
            codeSuccess : false,//验证码获取成功为true
            cashNum:"",//提现验证码
            alipay_account:"",//支付宝账号
            alipayName:"",//支付宝姓名
            userInfo : null,
            loadingShow:true,
            record:true,//收益提现记录
            getNumber : "获取验证码",
            disabledNum : 60,//验证码60秒计时
            disabledOnoff:false,//控制发送验证码按钮
        }
    },
    components:{
        loading,
        week : resolve => require(["./cashChild/week"], resolve),//星期组件
        page : resolve => require(["../../page"], resolve),//翻页组件
        month : resolve => require(["./cashChild/month"], resolve),//周组件
    },
    created() {
        axios.get("/userinfo/getuser").
        then(response=>{
            this.userInfo = response.data;
            this.loadingShow = false;
        }).catch(error=>{
            console.log(error)
        })
    },
    methods: {
        //弹框的显示隐藏
        telMaskShow () {
           this.telMask = true;
        },
        telMaskHide(){
            this.telMask = false;
            this.telMaskList = "1";
            this.cashNum = "";
            this.cashMobile = "";
            this.disabledNum =  60;
            this.disabledOnoff=false;
            this.getNumber="获取验证码";
            clearInterval(timer)
        },
        getCode(){//获取验证码
        if($("#cashMobile").next().css("display")=="none"){
            if(!this.cashMobile){
                this.errorPoint("手机号码不能为空")
            }else{
                var This = this;
                this.$validator.validateAll().then(result => {
                    this.disabledOnoff = true;//发送验证码按钮禁用
                    This.getNumber =  This.disabledNum+"s";
                    var timer = setInterval(function(){
                        This.getNumber =  This.disabledNum+"s";
                        This.disabledNum--;
                        if(This.disabledNum==0){
                            This.disabledNum =  59;
                            This.disabledOnoff=false;
                            This.getNumber="再次获取";
                            clearInterval(timer)
                        }
                    },1000)
                    if (result) {
                        let formData = {
                            mobile:this.cashMobile,//提现手机号
                            method:"tixiancode",//发送验证码
                        };
                        return axios.post('/sendcode',formData).then(response => {
                            // this.codeSuccess = true;//验证码获取成功
                            if(response.data.status=="0"){
                                this.errorPoint("验证码发送失败")
                            }
                        }).catch(error=>{
                            this.errorPoint("请输入正确的手机号码")
                        })
                    }
                })
                } 
            }
        },
        errorPoint(msg) {//失败的提示
            this.$message({
                message: '对不起，'+msg,
                type: 'error',
                customClass : "sucPoint",
                duration : 2000,
                showClose : true,
            });
       },
        //显示下一个弹窗
        nextZfb(){
            this.$validator.validateAll().then(result => {
                if (result) {
                axios.post('/tixiancode',{"code":this.cashNum}).then(response => {
                        if(response.data.status=="0"){
                            this.errorPoint("请输入正确的验证码")
                        }else{
                            this.telMaskList = "2"
                        }
                    }).catch(error=>{
                        this.errorPoint("请输入正确的验证码")
                    })
                }
            }) 
            
        },
        //显示验证成功
        showSuccess(){
            if(!this.alipay_account){
                this.errorPoint("请输入支付宝账号");
                return;
            }else if(!this.alipayName){
                this.errorPoint("请输入支付宝姓名");
                return;
            }else{
                var alipayMsg={
                    alipay_account:this.alipay_account,//支付宝账号
                    realname : this.alipayName //支付宝姓名
                } 
                axios.post('/tixianaccount',alipayMsg).then(response => {
                    if(response.data.status=="1"){
                        this.telMaskList = "3"
                    }
                })
            }
            
            
        },
        errorWarning(msg) {
            this.$message({
                message: msg,
                type: 'error',
                customClass : 'downLoadError',
                duration : 2000,
                showClose : true,
            });
        }, 
        
     }
}
</script>
<style scope>
.downLoadError{
    margin-top: 20%;
    font-size: 50px;
}
    .cashBox .el-tabs__nav .el-tabs__item.is-active,.cashBox .benefitRecord .el-tabs__item,.cashBox .benefitRecord .el-tabs__item:hover{
        border-left: none!important;
         background: transparent!important;
    }
    .cashBox .el-tabs--left .el-tabs__item:hover,.cashBox .el-tabs__item.is-active{
        background: transparent!important;
        color: #4b4b4b!important;
    }
    .cashBox .numMsg button{
        background:#ea514b;
    }
  /*   .cashBox .el-tabs__item{
        padding: 0 20px;
    } */
    .cashNumber{
        float: left;
        font-size: 16px;
        line-height: 66px;
        color: #333333;
        font-weight: bold;
        margin-left: 39px;
        background: #fff;
    }
    .cashTitle{
        border-bottom: 1px solid #dddddd;
        background: #fff;
    }
    .cashTitle button{
        float: right;
        margin-top: 15px;
        margin-right: 13px;
        
        line-height: 40px;
        font-size: 16px;
        padding: 0;
    }
    .verificationTel{
        width: 192px;
    }
    .cashRecordBtn{
        width: 90px;
    }
    .cashNumberMsg{
        padding: 17px 0 10px 18px;
        background: #fff;
    }
    .cashNumberMsgList{
        float: left;
        width: 216px;
        height: 90px;
        color: #414141;
        text-align: center;
        font-weight: bold;
        border-right: 1px solid #ddd;
    }
    .cashNumberMsgList p:nth-of-type(1){
        font-size: 16px;
        line-height: 40px;
    }
    .cashNumberMsg li:last-of-type{
        border: none;
    }
    .benefitRecord{
        margin-top: 24px;
        background: #fff;
    }
    .benefitRecord header{
        font-size: 16px;
        line-height: 66px;
        font-weight: bold;
        padding-left: 40px;
        border-bottom: 1px solid #dddddd;
    }
    .benefitRecord .el-tabs__header{
        height: 44px!important;
        padding-top: 5px;
        box-sizing: border-box;
    }
    .benefitRecord .el-tabs__header{
        width: 100%;
        padding-left: 32px;
        margin: 0;
    }
    .benefitRecord .el-tabs__item{
        width: 102px;
        text-align: center;
        font-size: 16px;
        line-height: 38px;
        color: #999999;
        font-weight: bold;
        border-left: 2px solid transparent!important;
    }
    .benefitRecord .el-tabs__item:hover{
        border-left: 2px solid transparent;
        background: transparent;
    }
    .benefitRecord .el-tabs__item:hover{
        color: #4b4b4b!important;
        border-left: 2px solid transparent!important;
    }
    .benefitRecord .is-active{
        color: #4b4b4b;
        border-left: 2px solid transparent!important;
    }
    .cashPage{
        padding: 50px 0;
    }
    .cashPage .el-pagination{
        width: 932px;
    }
   .el-pager li{
        background: #f6f6f6;
    }
    .el-pagination .btn-next, .el-pagination .btn-prev{
        background: #f6f6f6;
    }
    .numberBtn{
        font-size: 14px;
        line-height: 24px;
        color: #ea514b;
        background: transparent;
        border: none;
        padding: 0;
        outline: none;
    }
    .telMask{
        position: fixed;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.45)
    }
    .telMaskBox{
        width: 386px;
        height:312px;
        background: #fff;
        margin: 300px auto; 
    }
    .telMaskList{
        /* padding-top: 23px; */
        position: relative;
    }
    .telMasListTitle{
        font-size: 18px;
        line-height: 84px;
        color: #333333;
        text-align: center;
        margin-bottom: 5px;
    }
    .telInput input{
        border: none;
        border: 1px solid #ddd;
        height: 38px;
        padding: 0;
        padding-left: 16px;
        font-size: 14px;
        line-height: 38px;
        outline: none;
    }
    .telInput{
        padding-left: 43px;
    }
    .telMsg{
        margin-bottom: 18px;
    }
    .telMsg input{
        width: 298px;
    }
    .numMsg input{
        width: 148px;
    }
    .numMsg button{
        width: 135px;
        height: 40px;
        border: none;
        padding: 0;
        background: #ea514b;
        color: #fff;
        margin-left: 7px;
        outline: none;
    }
    .TelTips{
        font-size: 12px;
        line-height: 34px;
        color: #e1706a;
        padding-left: 43px;
    }
    .TelTips i{
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(../../../img/wonder.png) no-repeat;
        vertical-align: middle;
        margin-right: 6px; 
    }
    .telBtn{
        text-align: center;
        margin-top: 10px;
    }
    .telBtn button{
        width: 300px;
        height: 50px;
        background: #ea514b;
        color: #fff;
        padding: 0;
        border: none;
        outline: none;
    }
    .telClose{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 20px;
    }
    .zfbInput input{
        width: 298px;
    }
    .TelTips span{
        font-size: 12px;
        color: #bebebe;
        margin-left: 60px;
    }
    .telSuccess{
        margin-top: 8px;
        text-align: center;
        padding: 0;
    }
    .telSuccessText{
        font-size: 18px;
        line-height: 76px;
        text-align: center;
        color: #333333;
    }
    .cashBox .el-button--warning{
        background-color: #ea514b;
        border-color: #ea514b;
    }
    .cashBox .is-top:hover{
        color: #ea514b;
    }
</style>
